<template>
  <view class="dynamicInfo">
    <video :src="dynamicInfo.video" class="dynamicVideo"></video>
    <view class="creatBy">
      <view class="creatBy-left">
        <image :src="dynamicInfo.header" class="header-img"></image>
        <view class="name">{{ dynamicInfo.name }}</view>
      </view>
      <view class="addfllow">+关注</view>
    </view>
    <view class="title">
      {{ dynamicInfo.title }}
    </view>
    <view class="text">{{ dynamicInfo.text }}</view>
    <view class="time">{{ dynamicInfo.time }}</view>
    <view class="center">
      <view class="center-left">
        <span>评论</span>
        <span>55</span>
      </view>
      <view class="center-right">
        <span class="center-right-one">按推荐</span>
        <span class="center-right-two">按时间</span>
      </view>
    </view>
    <scroll-view scroll-y="true" style="height: 750rpx; margin-top: 30rpx">
      <view class="comment-main">
        <view
          class="comment-item"
          v-for="(item, index) in commentList"
          :key="index"
        >
          <view class="commentFirst">
            <view class="creatInfo">
              <view class="creatInfo-left">
                <image class="header-face" :src="item.image"></image>
                <view>
                  <view>{{ item.createByName }}</view>
                  <view class="time">
                    {{ item.createTime }}
                  </view></view
                >
              </view>
              <view class="creatInfo-right">
                <u-icon name="thumb-up" size="40" color="#ccc"></u-icon>
                <view>{{ item.like }}</view>
              </view>
            </view>
            <view class="details">{{ item.details }}</view>
          </view>
          <view class="commentChild"
            ><view
              v-for="(v, i) in item.child"
              :key="i"
              class="commentChild-item"
              @tap="getComment"
            >
              <view>
                <view class="creatInfo">
                  <view class="creatInfo-left">
                    <image class="header-face" :src="v.image"></image>
                    <view>
                      <view>{{ v.createByName }}</view>
                      <view class="time">
                        {{ v.createTime }}
                      </view></view
                    >
                  </view>
                  <view class="creatInfo-right">
                    <u-icon name="thumb-up" size="40" color="#ccc"></u-icon>
                    <view>{{ v.like }}</view>
                  </view>
                </view>
                <view class="details">{{ v.details }}</view>
              </view>
            </view></view
          >
        </view>
      </view></scroll-view
    >
    <view class="subComment">
      <u-input v-model="commentValue" @tap="firstComment" type="text" />
      <view class="sub-btns">
        <view class="sub-btn">
          <u-icon name="chat" color="#aaa" size="40"></u-icon>
          <view>{{ allComment }}</view>
        </view>
        <view class="sub-btn">
          <u-icon name="star" color="#aaa" size="40"></u-icon>
          <view>{{ allLike }}</view>
        </view>
        <view class="sub-btn">
          <u-icon name="thumb-up" color="#aaa" size="40"></u-icon>
          <view>{{ allGood }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      dynamicInfo: {
        video: require("@/static/new/e59fec624346c7a2f5f525822a641852.mp4"),
        name: "C***着",
        time: "2022-09-12 12:00",
        header: require("@/static/img/header.jpg"),
        title: "会喝水的人都瘦了，不信你试试",
        text: "球星谢幕战为何不完美？费德勒不是个例子，乔单克劳德球星谢幕战为何不完美？费德勒不是个例子",
      },
      commentList: [
        {
          createByName: "小貂蝉",
          createTime: "2022-12-20 11:00:00",
          details: "测试",
          like: 10,
          image: require("@/static/img/header.jpg"),
          child: [
            {
              createByName: "子龙111",
              createTime: "2022-12-20 11:00:00",
              details: "测试",
              image: require("@/static/img/header.jpg"),
              like: 3,
            },
            {
              createByName: "刘备",
              createTime: "2022-12-20 11:00:00",
              details: "测试1111111",
              image: require("@/static/img/header.jpg"),
              like: 3,
            },
            {
              createByName: "飞飞",
              createTime: "2022-12-20 11:00:00",
              details: "测试",
              image: require("@/static/img/header.jpg"),
              like: 3,
            },
          ],
        },
        {
          createByName: "李元芳",
          createTime: "2022-12-20 11:00:00",
          details: "测试",
          like: 3,
          image: require("@/static/img/header.jpg"),
        },
      ],
    };
  },
};
</script>

<style lang="scss" scoped>
.dynamicInfo {
  width: 100%;
  padding: 20rpx;
  .dynamicVideo {
    height: 500rpx;
    width: 100%;
  }
  .creatBy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .creatBy-left {
      display: flex;
      align-items: center;
      .header-img {
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
      }
      .name {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-left: 30rpx;
      }
    }
    .addfllow {
      background: #f4333c;
      font-size: 36rpx;
      text-align: center;
      line-height: 60rpx;
      width: 160rpx;
      height: 60rpx;
      border-radius: 30rpx;
      font-weight: bold;
      color: #fff;
    }
  }
  .title {
    font-size: 40rpx;
    font-weight: bold;
    color: #2d2d2d;
    margin-top: 20rpx;
  }
  .text {
    font-size: 34rpx;
    color: #666666;
    margin-top: 20rpx;
  }
  .time {
    color: #999999;
    margin-top: 20rpx;
    font-size: 30rpx;
  }
  .center {
    width: 100%;
    height: 60rpx;
    // border: 1px solid red;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20rpx;
    margin-top: 50rpx;
    font-size: 32rpx;
    .center-left {
      display: flex;
      align-items: center;
      span {
        margin-right: 10rpx;
      }
    }
    .center-left::before {
      margin-right: 20rpx;
      display: block;
      content: "";
      width: 6rpx;
      height: 36rpx;
      background: #f4333c;
    }
    .center-right {
      width: 260rpx;
      font-size: 28rpx;
      color: #9d9d9d;
      // border: 1px solid red;
      display: flex;
      align-items: center;
      justify-content: space-between;
      text-align: center;
      .center-right-one {
        width: 130rpx;
        border-right: 1px solid #3c3c3c;
      }
      .center-right-two {
        width: 130rpx;
      }
    }
  }
  // 评论
  .comment-main {
    .comment-item {
      margin-top: 40rpx;
      padding-bottom: 30rpx;
      border-bottom: 2rpx solid #ccc;
      padding: 0 20rpx;

      .commentFirst {
        .creatInfo {
          display: flex;
          justify-content: space-between;
          align-items: center;
          .creatInfo-left {
            display: flex;
            align-items: center;
            .header-face {
              width: 80rpx;
              height: 80rpx;
              border-radius: 50%;
              margin-right: 20rpx;
            }
            .time {
              color: #aaa;
              margin-top: 10rpx;
            }
          }
          .creatInfo-right {
            display: flex;
            align-items: center;
            font-size: 30rpx;
            color: #aaa;
          }
        }
        .details {
          margin-top: 30rpx;
        }
      }
      .commentChild {
        padding: 0 0 0 40rpx;
        background-color: #eee;
        padding: 20rpx;
        margin-top: 30rpx;
        margin-bottom: 100rpx;
        .commentChild-item {
          margin-top: 20rpx;
          .creatInfo {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .creatInfo-left {
              display: flex;
              align-items: center;
              .header-face {
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;

                margin-right: 20rpx;
              }
              .time {
                color: #aaa;
                margin-top: 10rpx;
              }
            }
            .creatInfo-right {
              display: flex;
              align-items: center;
              font-size: 30rpx;
              color: #aaa;
            }
          }
          .details {
            margin-top: 30rpx;
          }
        }
      }
    }
  }
  .subComment {
    display: flex;
    align-items: center;
    padding: 0 20rpx;
    .sub-btns {
      display: flex;
      .sub-btn {
        margin-left: 20rpx;
        display: flex;
      }
    }
  }
}
</style>